<template>
  <el-card class="stats-card" shadow="hover">
    <div class="stats-content">
      <div class="stats-icon">
        <IconifyIconOffline :icon="icon" :style="{ color: iconColor }" />
      </div>
      <div class="stats-info">
        <div class="stats-title">{{ title }}</div>
        <div class="stats-value">{{ value }}</div>
        <div class="stats-growth" :class="growthClass">
          <IconifyIconOffline :icon="growthIcon" class="growth-icon" />
          <span>{{ growthText }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { IconifyIconOffline } from "@/components/ReIcon";

interface Props {
  /** 标题 */
  title: string;
  /** 数值 */
  value: number | string;
  /** 图标 */
  icon: string;
  /** 图标颜色 */
  iconColor?: string;
  /** 增长率 */
  growthRate?: number;
  /** 对比文本 */
  compareText?: string;
}

const props = withDefaults(defineProps<Props>(), {
  iconColor: "#409EFF",
  growthRate: 0,
  compareText: "较昨日"
});

// 增长率样式类
const growthClass = computed(() => {
  if (props.growthRate > 0) return "growth-positive";
  if (props.growthRate < 0) return "growth-negative";
  return "growth-neutral";
});

// 增长率图标
const growthIcon = computed(() => {
  if (props.growthRate > 0) return "ep:arrow-up";
  if (props.growthRate < 0) return "ep:arrow-down";
  return "ep:minus";
});

// 增长率文本
const growthText = computed(() => {
  const rate = Math.abs(props.growthRate);
  const sign = props.growthRate > 0 ? "+" : props.growthRate < 0 ? "-" : "";
  return `${sign}${rate.toFixed(2)}% ${props.compareText}`;
});
</script>

<style scoped>
/* 响应式设计 */
@media (width <= 768px) {
  .stats-content {
    flex-direction: column;
    text-align: center;
  }

  .stats-icon {
    margin-right: 0;
    margin-bottom: 8px;
  }

  .stats-value {
    font-size: 24px;
  }
}

.stats-card {
  height: 120px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-2px);
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 8px 0;
}

.stats-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-right: 16px;
  font-size: 48px;
  background: rgb(64 158 255 / 10%);
  border-radius: 12px;
}

.stats-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.stats-title {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.stats-value {
  margin-bottom: 4px;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  color: #333;
}

.stats-growth {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

.growth-icon {
  margin-right: 4px;
  font-size: 14px;
}

.growth-positive {
  color: #67c23a;
}

.growth-negative {
  color: #f56c6c;
}

.growth-neutral {
  color: #909399;
}
</style>
